import React from 'react';
import { SeriesProductGroupC, PrimaryC, FirstHeaderC, SecondHeaderC, FormGroup, DATA_ENTRY } from '@/src/components';
import { Form } from 'antd';

class SeriesProductGroupDemo extends React.Component {
  constructor(props) {
    super(props);
    this.formRef = React.createRef();
    this.FormGroupRef = React.createRef();

    this.state = {
      init2: '6ca04893d1534db6ab2930514b857a7e',
      init3: undefined,
      init4: ['6ca04893d1534db6ab2930514b857a7e', '49d08101d53f436da16cb08a8ca95885'],
    };

    setTimeout(() => {
      this.setState({
        init3: '6ca04893d1534db6ab2930514b857a7e',
      });
    }, 3000);
  }

  onClick2 = () => {
    this.state.SeriesProductsC2.setSelect('f6d8c0aaf57a4f55aaba4344b08b4044');
  };

  onClick3 = () => {
    this.state.SeriesProductsC3.setSelect('f6d8c0aaf57a4f55aaba4344b08b4044');
  };

  onClick4 = () => {
    this.state.SeriesProductsC4.setSelect(['f6d8c0aaf57a4f55aaba4344b08b4044', '6ca04893d1534db6ab2930514b857a7e']);
  };

  render() {
    return (
      <div style={{ padding: '20px' }}>
        <Form ref={this.formRef}>
          <FirstHeaderC title='基本用法' />
          <div style={{ width: '700px' }}>
            <SecondHeaderC title='无初始化值' />
            <SeriesProductGroupC form={this.formRef.current} dataIndex='series1' onChange={(e) => console.log(e)} />
            <SecondHeaderC title='有初始化值-同步' />
            <SeriesProductGroupC
              form={this.formRef.current}
              dataIndex='series2'
              initialValue={this.state.init2}
              onRef={(ref) => this.setState({ SeriesProductsC2: ref })}
              onChange={(e) => console.log(e)}
            />
            <PrimaryC onClick={this.onClick2} title='修改' />
            <SecondHeaderC title='有初始化值-异步' />
            <SeriesProductGroupC
              form={this.formRef.current}
              dataIndex='series3'
              initialValue={this.state.init3}
              onChange={(e) => console.log(e)}
              onRef={(ref) => this.setState({ SeriesProductsC3: ref })}
            />
            <PrimaryC onClick={this.onClick3} title='修改' />
            <SecondHeaderC title='多选模式初始化' />
            <SeriesProductGroupC
              form={this.formRef.current}
              dataIndex='series4'
              multiple={true}
              initialValue={this.state.init4}
              onChange={(e) => console.log(e)}
              onRef={(ref) => this.setState({ SeriesProductsC4: ref })}
            />
            <PrimaryC onClick={this.onClick4} title='修改' />
            <SecondHeaderC title='设置校验规则' />
            <SeriesProductGroupC form={this.formRef.current} dataIndex='series5' rules={[{ required: true, message: '请选择基准!' }]} onChange={(e) => console.log(e)} />
            <SecondHeaderC title='设置帮助信息' />
            <SeriesProductGroupC form={this.formRef.current} dataIndex='series6' helper='lalal' onChange={(e) => console.log(e)} />
            <SecondHeaderC title='禁用' />
            <SeriesProductGroupC form={this.formRef.current} dataIndex='series7' disabled={true} onChange={(e) => console.log(e)} />
          </div>
        </Form>
        <SecondHeaderC title='formGroup集合组件' />
        <FormGroup
          dataSource={[
            {
              dataIndex: 'series8',
              type: DATA_ENTRY.SERIESPRODUCTGROUP,
              initialValue: this.state.init3,
              span: 12,
              controlLabelSpan: 8,
            },
          ]}
          onRef={(ref) => {
            this.FormGroupRef.current = ref;
          }}
          autoLayout={false}
        />
        <PrimaryC
          style={{ marginLeft: '20px' }}
          title='获取值'
          onClick={async () => {
            const formValues = await this.FormGroupRef.current.getFormGroupData();
            console.log(formValues);
          }}
        />
        <PrimaryC
          style={{ marginLeft: '20px' }}
          title='重置'
          onClick={() => {
            this.FormGroupRef.current.resetFields();
          }}
        />
      </div>
    );
  }
}

export default SeriesProductGroupDemo;
